<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery表格验证</title>
    <style>
        .star{
            color: red;
        }
        .dt{
            padding-top: 10px;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"type="text/javascript">
    </script>
    <script type="text/javascript">
    $(function(){
        $("form:input.required").each(function(){
            var $required= $("<strong class='star'>*</strong>")
            $(this).parent().append($required);
        })
        $("form :input").blur(function(){
            if($(this).is("#username")){
                if($(this).val()== ""){
                    alert("用户名不能为空！");
                }
            }
            if($(this).is("#pwd")){
                if($(this).val()== ""){
                    alert("密码不能为空！");
                }
                if(this.value.length < 8){
                    alert("密码不能小于8位，请重新输入！");
                }
            }
        })
    })
    </script>
</head>
<body>
    <form>
        <h3 align="center">用户注册</h3>
        <div class="dt">
            用户名：<input type="text"id="username" name="username" size=20 class="required"/>
        </div>
        <div class="dt">
            密&nbsp;&nbsp;码<input type="password"id="pwd" name="pwd" size=20 class="required"/>
        </div>
        <div class="dt">
            电&nbsp;&nbsp;话<input type="text"id="phone" name="phone" size=11 maxlength=11/>
        </div>
        <div class="dt">
            地&nbsp;&nbsp;址<input type="text"id="address" name="address" size=20 maxlength=20/>
        </div>
        <div class="dt">
            <input type="submit" name="sub" value="注册"/>
        </div>
    </form>
</body>
</html>